<template>
    <main>
        <!-- 头部部分 -->
        <header class="flex items-center justify-around bg-white" style="border-bottom: 1px solid var(--el-border-color)">
            <!-- Logo部分开始 -->
            <section class="flex justify-center items-center">
                <img src="../../assets/fpa_logo_compressed.png" class="w-12 h-12" alt="" />
                <span class="antialiased" style="margin-left:5px">自由编程协会开源社区</span>
            </section>
            
            <!-- Logo部分结束 -->
            <!-- 菜单部分开始 -->
            <el-menu :default-active="activeIndex" :router="true" class="el-menu-demo w-1/2" mode="horizontal" @select="handleSelect">
                <el-menu-item index="/">
                    <template #title>
                        <el-icon><HomeFilled /></el-icon>
                        <span>首页</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="/blog">
                    <template #title>
                        <el-icon><Grid /></el-icon>
                        <span>博客</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="/ie">
                    <template #title>
                        <el-icon><HelpFilled /></el-icon>
                        <span>面经</span>
                    </template>
                    
                </el-menu-item>
                <el-menu-item index="/leave">
                    <template #title>
                        <el-icon><CircleCloseFilled /></el-icon>
                        <span>请假</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="/active">
                    <template #title>
                        <el-icon><Ticket /></el-icon>
                        <span>活动</span>
                    </template>
                </el-menu-item>
                <el-sub-menu>
                    <template #title>
                        <el-icon><InfoFilled /></el-icon>
                        <span>关于</span>
                    </template>
                    <el-menu-item index="/resume">简介</el-menu-item>
                    <el-menu-item index="/developer">开发者</el-menu-item>
                </el-sub-menu>
            </el-menu>
            <!-- 菜单部分结束 -->
            <!-- 登录注册按钮开始 -->
            <section class="w-32 h-12 flex justify-center items-center">
                <el-button type="primary" size="large" round>登录</el-button>
                <el-button type="danger" size="large" round>注册</el-button>
            </section>
            <!-- 登录注册按钮结束 -->
        </header>
        <section class="p-6">
            <RouterView />
        </section>
        <footer> </footer>
    </main>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  HomeFilled,
  Setting,
  Ticket,
  InfoFilled,
  HelpFilled,
  Grid,
  CircleCloseFilled
} from '@element-plus/icons-vue'
const activeIndex = ref('/')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>
    